import './index.less';

const list = [
  {
    name: 'BEL/USDT',
    title: '永续',
    amount: '-12.56%',
    color: 'red',
    amountTitle: '横盘整理',
    time: '05:33:30'
  },
  {
    name: 'BEL/USDT',
    title: '永续',
    amount: '+12.56%',
    color: '#00C087',
    amountTitle: '今日新高',
    time: '05:33:30'
  },
  {
    name: 'BEL/USDT',
    title: '永续',
    amount: '-12.56%',
    color: 'red',
    amountTitle: '横盘整理',
    time: '05:33:30'
  },
  {
    name: 'BEL/USDT',
    title: '永续',
    amount: '+12.56%',
    color: '#00C087',
    amountTitle: '今日新高',
    time: '05:33:30'
  }
]
function FooterMarket() {


  return (
    <div>
      <div className='flex'>
        {
          list?.map((res, index) => {
            return (
              <div key={index}>
                <div className="flex-footer">
                  <div className='text'>{res.name}</div>
                  <div className='text'>{res.title}</div>
                  <div style={{ color: res.color }} className='footer-text'>{res.amount}</div>
                  <div style={{ color: res.color }} className='footer-text'>{res.amountTitle}</div>
                  <div className='text-time'>{res.time}</div>
                </div>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

export default FooterMarket